<!--
Copyright 2015 Google Inc. All rights reserved.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
file except in compliance with the License. You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
ANY KIND, either express or implied. See the License for the specific language governing
permissions and limitations under the License.
-->
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <script src="../webcomponentsjs/webcomponents.min.js"></script>
  <link rel="import" href="google-map-storyboard.html">
  <link rel="import" href="google-map-scene.html">
</head>
<body unresolved>
  <!-- When using storyboard on your own website, you'll need a new API key of
       your own. You can obtain one by following instructions here:
       https://developers.google.com/maps/documentation/javascript/tutorial#api_key-->
  <google-map-storyboard apiKey="AIzaSyCuocpy_Ekp1WM0x5t7hdBdE0nr_dmWZtE" current="introduction" fit>
    <google-map-scene id="introduction" address="Sydney" zoom="12">
      <div>This is the <code>google-map-storyboard</code> Polymer element. Inside a
        Storyboard, there are scenes (<code>google-map-scene</code>), and
        inside each scene there is content.  Notice that down the bottom it
        tells you how many pieces of content there are at this scene.
        Click on the marker to show the next piece of content.</div>
      <div>This is the last piece of content for this scene.  If you click on
        the marker again, you go back to the first piece of content.  To
        proceed to the next scene, click the forward arrow or the play button
        at the bottom of the map.</div>
    </google-map-scene>
    <google-map-scene id="scenesWithImages" address="Melbourne, Australia">
      <div>Content can also be images. Please click on the marker.</div>
      <img src="https://www.polymer-project.org/images/logos/lockup.svg">
      <div>To get started with polymer please visit:
        www.polymer-project.org</div>
    </google-map-scene>
    <google-map-scene id="changeAddress" address="Adelaide, Australia">
      <div>If an invalid address is given, the scene won't be shown.  If the
        address is changed, the location of the scene will change in
        real time.</div>
    </google-map-scene>
    <google-map-scene id="startUsingDevTools" address="Perth, Australia">
      <div>Now open up the developer tools if you are using Chrome.</div>
      <div>You can set the current scene by changing the current attribute in
        the storyboard and setting it to the scene id you want to jump to.
        For example, jump two scenes back by setting current to
        "scenesWithImages".</div>
      <div>Using the dev tools, you can also add and remove scenes
        on the fly.</div>
    </google-map-scene>
  </google-map-storyboard>
</body>
</html>
